<template>
	<view class="pc_clickEffect">
		<template v-for="(item, index) in effects">
			<view class="clickEffect"
				:class="{'clickEffect-img':type=='image','flex-row-center-center':type=='ripple','clickEffect-ripple':type=='ripple'}"
				:style="item.style" v-if="item.visible" :key="index">
				<view class="one-effect" v-if="type=='ripple'"
					:style="{'animation-duration':aniDuration,'animation-delay':aniDelay,'box-shadow':`inset 0rpx 0rpx 40rpx ${item.color}`}">
				</view>
				<view class="tow-effct" v-if="type=='ripple'"
					:style="{'animation-duration':aniDuration,'box-shadow':`inset 0rpx 0rpx 40rpx ${item.color}`}">
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: 'pc-clickEffect',
		props: {
			size: {
				type: [String, Number],
				default: '100'
			},
			timeout: {
				type: [String, Number],
				default: '800'
			},
			type: {
				type: String,
				default: 'image', //image 图片 ripple 涟漪
			},
			mgList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				idCounter: 0,
				ismove: false,
				effects: [],
				imageList: [
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cc4f776ef0114145add54a07141998a1.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b80bd998fd8445cb82f2fa33ea1b28b7.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/19bcd3dc80024333a1c2894b39446b28.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfd915bd2d4f48678120115a1f29562f.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/4049d1e98c3442479c583158c54181a8.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/4efd23bd1c6c4b3ba22bbd1781694b6d.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9210afad054e40f593d1869081e6da67.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5563169616a04a2f81fa7fd2adf88f3d.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b2e06ba5aed24cc2b86255e13c34755c.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d5f75744670845a5bcfa5cf0ca2b359a.png"
				],
				removalQueue: [], // 移除队列
				rippleColorList: [
					"#f419f1",
					"#f7f71c",
					"#4ad4bd",
					"#ed1a1b",
					"#20fbfb"
				],
			};
		},

		computed: {
			aniDuration() {
				return this.timeout / 1000 + 's'
			},
			aniDelay() {
				return this.timeout / 1000 / 4 + 's'
			}
		},
		mounted() {
			this.handleGetProps()
		},
		methods: {
			handleGetProps() {
				if (this.mgList.length) {
					this.imageList = this.mgList

				}
			},
			getRandomColor() {
				const randomIndex = Math.floor(Math.random() * this.rippleColorList.length);
				return this.rippleColorList[randomIndex];
			},
			getRandomImage() {
				let imageList = this.imageList
				if (!imageList || imageList.length === 0) {
					return null; // 如果数组为空，返回 null
				}
				const randomIndex = Math.floor(Math.random() * imageList.length);
				return imageList[randomIndex];
			},
			handleTouchStart(e) {
				// 处理点击事件
				const clientX = e.touches[0].clientX;
				const clientY = e.touches[0].clientY;
				this.createEffect(clientX, clientY);
			},
			createEffect(clientX, clientY, isMove = false) {
				let icon = this.getRandomImage()
				let styleStart
				const size = uni.upx2px(Number(this.size));
				if (icon && icon !== '' && this.type == 'image') {
					this.$emit("flyNowIcon", icon)
					styleStart =
						`display: block; position: fixed; z-index: 999; pointer-events: none; width: ${size}px; height: ${size}px; background-image: url(${icon}); background-size:contain ;background-repeat: no-repeat; left: ${clientX - Number(this.size) / 4}px; top: ${clientY - Number(this.size) / 4}px;animation-duration:${this.aniDuration}!important ;`;
				} else if (this.type == 'ripple') {
					styleStart =
						`display: block; position: fixed; z-index: 999; pointer-events: none; width: ${size}px; height: ${size}px; left: ${clientX - Number(this.size) / 4}px; top: ${clientY - Number(this.size) / 4}px;`;
				} else {
					return
				}
				let ripperColor = this.getRandomColor()
				let obj = {
					style: styleStart,
					id: this.idCounter++,
					visible: true,
					color: ripperColor
				}
				this.effects.push(obj);
				setTimeout(() => {
					this.handleRemoveEffect(obj.id)
				}, this.timeout);

			},
			handleRemoveEffect(effectId) {
				// 找到对应的特效并设置为不可见
				const effect = this.effects.find(e => e.id === effectId);
				if (effect) {
					this.removalQueue.push(effectId); // 将要移除的特效 ID 加入队列
					this.processRemovalQueue(); // 处理移除队列
				}
			},
			processRemovalQueue() {
				// 如果没有待移除特效，结束处理
				if (this.removalQueue.length === 0) return;
				const effectId = this.removalQueue[0]; // 获取队列中的第一个特效 ID
				const index = this.effects.findIndex(e => e.id === effectId);
				if (index !== -1) {
					this.effects[index].visible = false
				}
				this.removalQueue.shift(); // 移除队列中的第一个元素
				this.processRemovalQueue(); // 递归处理下一个
			},



		}
	}
</script>

<style lang="scss">
	.pc_clickEffect {
		pointer-events: none;
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9;

		.clickEffect {}

		.clickEffect-img {
			animation: mImageAnimation 0.8s forwards;
		}

		.clickEffect-ripple {
			.one-effect {
				width: 100%;
				height: 100%;
				box-shadow: inset 0rpx 0rpx 10rpx rgba(255, 255, 255, 1);
				border-radius: 50%;
				animation: scaleEffect 1s linear infinite;
				opacity: 0;
			}

			.tow-effct {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				height: 100%;
				width: 100%;
				box-shadow: inset 0rpx 0rpx 10rpx rgba(255, 255, 255, 1);
				border-radius: 50%;
				opacity: 0;
				z-index: 9;
				animation: scaleEffect 1s linear infinite;
			}


		}

		@keyframes scaleEffect {
			0% {
				opacity: 1;
				transform: scale(0.3);
			}

			100% {
				opacity: 0;
				transform: scale(1);
			}
		}

		@keyframes mImageAnimation {
			0% {
				transform: scale(0.1) rotate(40deg);
				/* 从小到大，保持旋转 */
				opacity: 1;
				/* 可见 */
			}

			30% {
				transform: scale(1)rotate(0deg);
				/* 停顿在正常大小 */
				opacity: 1;
				/* 可见 */
			}

			70% {
				transform: scale(1)rotate(0deg);
				/* 放大到3倍 */
				opacity: 1;
				/* 可见 */
			}

			100% {
				transform: scale(2);
				/* 保持3倍大小 */
				opacity: 0;
				/* 不可见 */
			}
		}
	}
</style>